<style scoped>
    .role-query-page{}
    .role-query-page .role-query-content{width:45%;margin:auto;}

    .role-query-page .role-query-content .box-card{width:86%;}
    .role-query-page .role-query-content .box-card .el-card__header{padding: 0 20px;height:36px;line-height:36px;}
    .role-query-page .role-query-content .box-card .el-card__body{height:400px;overflow-x:hidden;overflow-y:scroll;padding: 10px 20px;}
    .role-query-page .role-query-content .box-card .el-card__body .el-tree{border:none;}
    
    .role-query-page .role-query-content .box-card .el-card__body .personItem{padding:0 10px;line-height:24px;}
    .role-query-page .role-query-content .box-card .el-card__body .personItem:hover{background:#f1e7e4;}
    .role-query-page .role-query-content .box-card .el-card__body .noPersonitem{text-align:center;line-height:60px;padding:20px 10px;}
</style>
<template>
    <div class="role-query-page">
        <div class="role-query-content">
            <div class="content-title">
                <el-form :inline="true" :model="selectForm" class="demo-form-inline">
                    <!--角色名称-->
                    <el-form-item :label="nowLangue.roleName">
                        <el-select size="mini" v-model="selectForm.roleName"  @change="selectRoleName" :placeholder="nowLangue.pleaseSelect">
                            <el-option v-for="(role,index) in selectForm.roleLists" :key="index" :label="role.roleName":value="role.roleName">
                                <span style="float: left">{{ role.roleName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ role.roleCode }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="selectForm.check_style" @change="changeRadio">
                            <!--查权限-->
                            <el-radio :label="1" cloak>{{nowLangue.checkPermissions}}</el-radio>
                            <!--查人员-->
                            <el-radio :label="2" cloak>{{nowLangue.searchPersonnel}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>

            <el-card class="box-card">
                <div slot="header" class="clearfix" v-if="roleName">
                    <span>{{roleName}}</span>
                </div>
                <!-- 权限 -->
                <div v-if="powerFlag" class="text item">
                    <el-tree id="power" :data="seeBigPowers" :props="privilegeProps" accordion default-expand-all> </el-tree>
                </div>
                <!-- 人员 -->
                <div v-if="personFlag && seePersons" v-for="person in seePersons" :key="person.personName" class="text personItem">
                    {{person.personName }}
                </div>
                <div v-if="personFlag && !seePersons.length" class="text noPersonitem" v-cloak>
                    <!--暂无数据-->
                    {{nowLangue.noData}}
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                nowLangue:{},
                selectForm:{ //查询表单
                    roleName:"",
                    check_style:1,
                    roleLists:[]   //所有角色列表
                },     
                // roleLists:[],    //所有角色列表
                roleName: '',
                roleId:'',
                // check_style: 1,
                seeBigPowers:[],    //权限
                seePersons:[],     //人员   
                powerFlag:true,
                personFlag:false,
                privilegeProps: {
                    children: 'children',
                    label: 'permission'
                },
                personProps:{
                    children: 'children',
                    label:'personName'
                }
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            // powerData(){
            //     return this.$store.state.powerData;
            // },
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            }
        },
        mounted: function () {
            var _this = this;
            // 打开页面 首先获取所有角色列表
            _this.roleList();
        },
        methods: {
            //获取所有角色列表
             roleList(){
                var _this=this;
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "role/selectEnable",
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            console.log(data);
                            _this.selectForm.roleLists=data.data;
                            // _this.roleLists=data.data;
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
             },
             //选择角色名称
             selectRoleName(){
                 var _this=this;
                 for(var i=0;i<_this.selectForm.roleLists.length;i++){
                    if(_this.selectForm.roleName==_this.selectForm.roleLists[i].roleName){
                        _this.roleId=_this.selectForm.roleLists[i].id;
                        _this.roleName=_this.selectForm.roleName;
                    }
                 }
                 //选好角色后，查人员或者查权限
                 if(_this.selectForm.check_style==1){   //查权限
                    _this.seePrivilege();
                 }else if(_this.selectForm.check_style==2){   //查人员
                    _this.seePerson();
                 }
             },
             changeRadio(value){
                 var _this=this;
                 if(value==1){   //查权限
                     _this.seePrivilege();
                 }else if(value==2){   //查人员
                     _this.seePerson();
                 }
             },
             //查权限
             seePrivilege(){
                 var _this=this;
                 $.ajax({
                     type: 'GET',
                     url: _this.metadata_service + "role/viewRole",
                     cache: false,
                     data:{"roleId":_this.roleId},
                     success: function (data) {
                         if (data.success) {  
                             _this.powerFlag=true;
                             _this.personFlag=false;
                             _this.seeBigPowers=data.data;
                         }else
                             _this.common.errorTip(data.errorMessage);
                     }
                 });
             },
             //查人员
             seePerson(){
                 var _this=this;
                 $.ajax({
                     type: 'GET',
                     url: _this.metadata_service + "empower/queryByRole",
                     cache: false,
                     data:{"roleId":_this.roleId},
                     success: function (data) {
                         if (data.success) {
                              _this.powerFlag=false;
                             _this.personFlag=true;
                             _this.seePersons=data.data;
                         }else
                             _this.common.errorTip(data.errorMessage);
                     }
                 });
             }
        }
    }
</script>




